<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
    <!-- vue的出现是为了操作DOM的,所以,尽量少用jquery -->
</head>
<body>
    <div id="app">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label for="">
                Id:
                <input type="text" class="form-control" v-model="id">
            </label>

            <label for="">
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>
                <!-- 在vue中, 使用事件绑定机制,为元素指定处理函数时,如果方法带括号,则可以传参.不带也可以正常操作 -->
            <input type="button" value="添加" class="btn btn-primary" @click="add">
            <label for="">
                搜索名称关键字:
                <input type="text" class="form-control" v-model="keywords">
            </label>
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 通过关键字搜索, 过滤数据 v-for中可以使用方法 -->
                <!-- search()是一个函数 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <!--  .prevent 事件修饰符 => 阻止a标签默认行为 -->
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

<script>
    var vm =new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '', //搜索关键字
            list: [
                {id: 1, name: '奔驰', ctime: new Date()},
                {id: 2, name: '宝马', ctime: new Date()}
            ]
        },
        methods: {search: function (keywords) {
                /*var newList = [];
                this.list.forEach(item => {
                    console.log(item.name.indexOf(keywords))
                    if (item.name.indexOf(keywords) != -1) {
                        newList.push(item);
                    }
                })
                return newList;*/

                //  注意: forEach some filter findIndex 都属于数组的新方法
                /**
                 *  forEach => 循环遍历数组
                 *  some => 循环数组,如果返回true, 则会终止数组的后续循环
                 *  filter => 返回复合条件的数组
                 *  findIndex => 返回索引
                 */
                return this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                })
            },
            add: function () {
                console.log("add...")
                const car = {id: this.id, name: this.name, ctime: new Date()};
                this.list.push(car);
                // 等号是从右开始运算. => 意思是将id与name赋空值
                this.id=this.name=''
            },
            del: function(id) {

                // findIndex() => 寻找索引
                var index = this.list.findIndex(item => {
                    if (item.id == id) return true;
                })
                console.log(index)

                // js Array some(), 如果返回true, 则会终止数组的后续循环
                this.list.some((item,i) => {
                    if (item.id == id) {
                        // splice => Array的删除方法
                        this.list.splice(i,1);
                        return true;
                    }
                })
            }
        }
    })
</script>
</body>
</html>